import React, { FC } from 'react'
import { NavBar, Space, Toast, Popover, Grid } from 'antd-mobile'
import {
    SearchOutline, MoreOutline, CloseOutline, LeftOutline, AntOutline,
    HandPayCircleOutline,
    ScanningOutline,
    TransportQRcodeOutline,
} from 'antd-mobile-icons'
import { useNavigate, useLocation } from 'react-router-dom'
import { Action } from 'antd-mobile/es/components/popover'


const MyHead: FC<{
    title?: string,
    back?: boolean,
    children?: any
}> = ({
    title,
    back,
    children
}) => {
        const router = useNavigate()
        const { pathname } = useLocation()
        const actions: Action[] = [
            { key: '/app/home', icon: <ScanningOutline />, text: '首页', disabled: pathname == '/app/home' ? true : false },
            { key: '/login', icon: <HandPayCircleOutline />, text: '登录', disabled: pathname == '/login' ? true : false },
            { key: '/search', icon: <TransportQRcodeOutline />, text: '搜索', disabled: pathname == '/search' ? true : false },
            { key: '/app/mine', icon: <AntOutline />, text: '我的', disabled: pathname == '/app/mine' ? true : false },
        ]

        const right = (
            <div >
                <Space >
                    <Popover.Menu
                        actions={actions}
                        placement='bottom-start'
                        mode='dark'
                        trigger='click'
                        onAction={(node: any) => { router(node.key) }}

                    >
                        <MoreOutline className='appicon' />
                    </Popover.Menu>
                </Space>
            </div>
        )
        const goBack = () => {
            router(-1)
        }


        const backText = (
            !back ? (children ? children : <div onClick={goBack} style={{ display: 'flex', alignItems: 'center' }}>
                <LeftOutline />
                <span>返回</span>
            </div>) : null
        )



        return (
            <NavBar right={right} style={{ position: 'fixed', width: '100%', top: 0, left: 0, zIndex: 1000, background: '#fff' }} back={backText} backArrow={false}>
                {title}
            </NavBar>
        )
    }

export default MyHead